<template>
    <div class="drug-right">
        <crown-outlined class="yell-icon" />
        <span class="range">本周药品销售收排行</span>
        <table class="raqnge-bottom">
            <tr v-for="(item, index) in tableArr" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.code }}</td>
                <td>{{ item.drugname }}</td>
                <td @click="addArr(item)">添加</td>
            </tr>
        </table>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { CrownOutlined } from '@ant-design/icons-vue';
import Bus from "../../../mitt/index"
export default defineComponent({
    components: { CrownOutlined },
    setup() {
        const tableArr = [
            { id: 1, code: 100001, drugname: "兰索拉唑肠溶片", num: 1, price: 88 },
            { id: 2, code: 100002, drugname: "甲钴胺片", num: 1, price: 88 },
            { id: 3, code: 100003, drugname: "复方求唑沙宗奥囊", num: 1, price: 88 },
            { id: 4, code: 100004, drugname: "对乙酰氨基酚片", num: 1, price: 88 },
            { id: 5, code: 100005, drugname: "双嘧达莫片", num: 1, price: 88 },
            { id: 6, code: 100006, drugname: "阿莫西林胶囊", num: 1, price: 88 },
            { id: 7, code: 100007, drugname: "骨肽注射液", num: 1, price: 88 },
            { id: 8, code: 100008, drugname: "双氯芬酸钠肠溶片", num: 1, price: 88 },
            { id: 9, code: 100009, drugname: "滴眼用利福平", num: 1, price: 88 },
            { id: 10, code: 100010, drugname: "红霉素眼膏", num: 1, price: 88 },
        ]
        const addArr = (item: any) => {
            Bus.emit("addDrug", item)
        }
        return { tableArr, addArr }
    }
})
</script>

<style scoped lang="less">
.drug-right {
    width: 37%;
    height: 500px;
    // background-color: pink;
}

.yell-icon {
    color: #f8d63c;
    font-size: 16px;
}

.range {
    font-size: 20px;
    font-weight: bold;
    margin-left: 10px;
}

.range-ul {
    padding-right: 30px;
    width: 500px;
}

/deep/.range-ul>li {
    // padding: 10px 20px;
    box-sizing: border-box;
    list-style-type: decimal;
    list-style-position: inside;
    width: 100%;
    display: flex;
    line-height: 28px;
    justify-content: space-between;
    font-size: 16px;
    border: 1px solid #eee;
    margin: 15px 0px 15px 20px;
}

.raqnge-bottom {
    width: 540px;
    margin-top: 20px;
}

.raqnge-bottom>tr {
    width: 100%;
}

.raqnge-bottom>tr>td {
    text-align: center;
    width: 150px;
    height: 46px;
    font-size: 17px;
    line-height: 46px;
}

.raqnge-bottom>tr>td:nth-child(1) {
    width: 80px;
    color: #666ee8;
    font-weight: bold;
    font-size: 20px;
}

.raqnge-bottom>tr>td:nth-child(4) {
    color: #666ee8;
    cursor: pointer;
}

// .range-left{
//     line-height: 45px;
//     color:#666ee8;
//     font-size: 23px;
//     text-align: center;
//     width: 30px;
// }
// .range-ul>li>span:nth-child(3){
//     color: #8d93ec;
//     cursor: pointer;
// }
</style>